<template>
    <div class="container">
        <step-form :stepNames="['请填写用户名', '请填写手机号', '请填写密码']"
                   :showResult="true"
                   :showTheme="true"
                   themeColor="#ff6700"
                   @success="handleSubmit">
            <template #step-0>
                <div slot="step-0-label">用户名</div>
                <input type="text" slot="step-0-content" name="username" required pattern="[a-zA-z]{4,6}" placeholder="请输入用户名" title="用户名格式错误">
            </template>
            <template #step-1>
                <div slot="step-1-label">手机号</div>
                <input type="text" slot="step-1-content" name="phone" required pattern="1[3-9]\d{9}" placeholder="请输入手机号" title="手机格式错误">
            </template>
            <template #step-2>
                <div slot="step-2-label">密码</div>
                <input type="text" slot="step-2-content" name="password" required  pattern="\d{6}" placeholder="请输入密码" title="密码格式错误">
            </template>
        </step-form>
    </div>
</template>

<script>
    import StepForm from '@/components/StepForm.vue'; // 导入步骤条组件

    export default {
        components: {
            StepForm
        },
        data() {
            return {
            }
        },
        methods : {
            handleSubmit(data){
                console.log("表单数据：", data)
            }
        }
    };
</script>

<style scoped>
</style>